@include("template::My.views.header")  
<link href="/mycms/cms/theme/My/assets/css/me.css?time={{time()}}" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.2.6/swiper-bundle.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.2.6/swiper-bundle.min.js"></script>
<style>
    .swiper-pagination{
               
                    padding-top: 0px;
                    margin-top: 0px;
                    position: static;
                }
    .swiper-pagination-bullet{
        bottom: -6px;
        border-radius:2px;
        height: 4px;
        width: 6px;
        background: #000;
        opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.5);
    }
    .swiper-pagination-bullet-active{
        opacity: var(--swiper-pagination-bullet-inactive-opacity, 1);
        width: 15px;
    }
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
        bottom: -4px;
    }
</style>
</head>
    <body class="bg-gradient-to-b from-[#EAF0FF] to-[#F9F9F9]  min-h-full">
         <div class="container mx-auto w-11/12  h-[66px]  mt-5  flex flex-row" >
            <div class="h-[66px] w-[66px]   ">
                <img class="h-[62px] w-[62px] rounded-full " src="{{auth()->user()->img?:'/mycms/cms/theme/mycms/assets/img/blog/1.jpg'}}"  style="border-style: solid; border-width: 2px;border-color:#fff;"   />
            </div>
            <div class="basis-10/12 pl-[15px] h-[66px]  pt-[8px]">
                <p class="text-[#0B0B0B] font-['PingFang'] text-[22px]  font-bold ">{{auth()->user()->nickname?:auth()->user()->name}}</p>
                <p class="text-[#666666] font-['PingFang'] text-[12px]  font-medium"><a href="{{route('user.info')}}">完善资料</a></p>  
            </div>
            <div class=" w-[18px] relative items-end" > 
                <div class="absolute left-0 top-[14px] h-[18px] w-[18px]"><a href="{{route('user.info')}}"><img src="/mycms/cms/theme/My/assets/img/30.png" class="w-[18px] h-[18px]"/></a></div>
                <!-- <button  class="text-white font-bold text-xl">2</button> -->
            </div> 
        </div>
        <div class="container mx-auto w-11/12 rounded-2xl bg-white h-auto mt-[21px] p-[21px] ">
            <p class="text-[#0B0B0B] text-[16px] font-bold mb-[20px]">我参与的活动</p>
            <div class="swiper h-auto">
                <div class="swiper-wrapper   ">
                     @foreach($list as $k=>$v)
                     @if($v->article->status)
                    <div class="flex items-center space-x-4 swiper-slide overflow-hidden" style="width:100%">
                        <div class="shrink-0">
                         <img class="h-[75px] w-[75px]" src="{{$v->article->img}}" alt=" ">
                        </div>
                       <div class="h-20" >
                            <a href="{{single_path($v->article->id)}}"><p class="text-[#0B0B0B] leading-[32px]  font-['PingFang']  text-[14px] font-bold break-words overflow-ellipsis overflow-hidden">{{$v->article->title}}</p>
                            <p class="font-['PingFang'] leading-[22px] text-[#666666] text-[13px]">{{$v->article->description}}</p></a>
                        </div>
                    </div>
                    @endif
                    @endforeach
                    
                </div>
                <div class="swiper-pagination " ></div>
            </div>
        </div>
        <div class="container mx-auto h-auto  bg-white  w-11/12  rounded-xl mt-[21px] pt-[20px] pb-[20px] mb-[100px]" >
            <div class=" w-11/12  mx-auto   flex  flex-row  h-[30px] mb-[30px]  ">
                <div class="h-[30px] w-[30px] ">
                     <a href="{{route('cms.honor')}}" ><img src="/mycms/cms/theme/My/assets/img/31.png"    class="h-[30px] w-[30px]"></a>
                </div>
                <div class="h-[30px] basis-10/12 ">
                    <a href="{{route('cms.honor')}}" ><p class="h-[30px]  leading-[30px]    font-['PingFang'] text-[15px] font-bold   pl-[10px]">荣誉证书</p></a>
                </div>
                <div class="text-right  w-[20px] ">
                    <a href="{{route('cms.honor')}}" ><img src="/mycms/cms/theme/My/assets/img/46.png"/></a>
                </div>
            </div>
            <div class=" w-11/12  mx-auto   flex  flex-row    h-[30px]  mb-[30px] ">
                <div class="h-[30px] w-[30px] ">
                    <img src="/mycms/cms/theme/My/assets/img/32.png"   class="h-[30px] w-[30px]">
                </div>
                <div class="h-[30px] basis-10/12">
                     <p class="h-[30px]  leading-[30px]  font-['PingFang'] text-[15px] font-bold   pl-[10px]">我的档案</p>
                </div>
                 <div class="text-right  w-[20px] ">
                     <img src="/mycms/cms/theme/My/assets/img/46.png"/>
                </div>
            </div>
            <div class=" w-11/12  mx-auto   flex  flex-row   mb-[30px] ">
                <div class="h-[30px] w-[30px] ">
                   <a href="#"><img src="/mycms/cms/theme/My/assets/img/33.png"   class="h-[30px] w-[30px]"></a>
                </div>
                <div class="h-[30px] basis-10/12">
                    <a href="#"><p class="h-[30px]  leading-[30px]  font-['PingFang'] text-[15px] font-bold   pl-[10px]">我的订单</p></a>
                </div>
                 <div class="text-right  w-[20px] ">
                    <a href="#"><img src="/mycms/cms/theme/My/assets/img/46.png"/></a>
                </div>
            </div>
            <div class=" w-11/12  mx-auto   flex  flex-row   mb-[30px] ">
                <div class="h-[30px] w-[30px] ">
                     <a href="#"><img src="/mycms/cms/theme/My/assets/img/34.png"  class="h-[30px] w-[30px]"></a>
                </div>
                <div class="h-[30px] basis-10/12">
                   <a href="#"><p class="h-[30px]  leading-[30px]  font-['PingFang'] text-[15px] font-bold   pl-[10px]">联系客服</p></a>
                </div>
                 <div class="text-right  w-[20px] ">
                    <a href="#"><img src="/mycms/cms/theme/My/assets/img/46.png"/></a>
                </div>
            </div>
            <div class=" w-11/12  mx-auto   flex  flex-row   ">
                <div class="h-[30px] w-[30px] ">
                  <a href="#"><img src="/mycms/cms/theme/My/assets/img/35.png"   class="h-[30px] w-[30px]"></a>
                </div>
                <div class="h-[30px] basis-10/12">
                     <a href="#"><p class="h-[30px]  leading-[30px]  font-['PingFang'] text-[15px] font-bold   pl-[10px]">帮助中心</p></a>
                </div>
                 <div class="text-right  w-[20px] ">
                    <a href="#"><img src="/mycms/cms/theme/My/assets/img/46.png"/></a>
                </div>
            </div>
        </div>
        <br><br>
        <div class="container mx-auto bg-white w-full h-16 flex flex-row   left-0 right-0 bottom-0 fixed  ">
            <div class="basis-4/12 text-center bg-white  pt-1">
                 <a href="{{url('/')}}"><div class="content-center "><center><img src="/mycms/cms/theme/My/assets/img/41.png" class="h-[33px] w-[33px]  justify-items-center" ></center></div>
                <p  class="text-center font-medium  text-[11px] text-[#333333] font-['PingFang']">首页</p></a>
            </div>
            <div class="basis-4/12  bg-white  pt-1 ">
                 <a href="{{route('cms.honor')}}" ><div class="content-center"><center><img src="/mycms/cms/theme/My/assets/img/39.png" class="h-[33px] w-[33px]  justify-items-center"></center></div>
                <p  class="text-center  font-medium  text-[11px] text-[#333333] font-['PingFang']">荣誉</p></a>
            </div>
            <div class="basis-4/12 bg-white  pt-1">
                <a href="{{route('user.index')}}"> <div class="content-center"><center><img src="/mycms/cms/theme/My/assets/img/36.png" class="h-[33px] w-[33px] justify-items-center"></center></div>
                <p class="text-center font-medium text-[11px] text-[#3368FD] font-['PingFang']">我的</p></a>
            </div>
        </div>
<script>
  var mySwiper = new Swiper ('.swiper', {
              // direction: 'vertical', // 垂直切换选项
               loop: true, // 循环模式选项
               autoplay:true,
               preventClicks : false,
                          slidesPerView: 1,
                spaceBetween: 30,
               // 如果需要分页器
               pagination: {
                 el: '.swiper-pagination',
               },
               
               // // 如果需要前进后退按钮
               // navigation: {
               //   nextEl: '.swiper-button-next',
               //   prevEl: '.swiper-button-prev',
               // },
               
               // // 如果需要滚动条
               // scrollbar: {
               //   el: '.swiper-scrollbar',
               // },
             })    
</script>
@include("template::My.views._footer")